<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
    width="500"
    @close="handleClose"
    draggable
    :z-index="2000"
  >
    <el-table
      :data="list"
      height="400"
      style="width: 100%"
      border
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="tag_name" label="图片标签"> </el-table-column>
      <el-table-column prop="score" label="分值"> </el-table-column>
      <el-table-column prop="tag_name" label="图片标签"> </el-table-column>
      <el-table-column prop="score" label="分值"> </el-table-column>
      <el-table-column prop="tag_count" label="数量">
        <template #default="{ row }">
          <el-input
            type="number"
            v-model="row.tag_count"
            placeholder="请输入数量"
            oninput="value=value.replace(/[^0-9]/g,'')"
          ></el-input>
          <el-input
            type="number"
            v-model="row.tag_count"
            placeholder="请输入数量"
            oninput="value=value.replace(/[^0-9]/g,'')"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { nextTick, onMounted, ref, toRefs, reactive } from "vue";
import { getImageTag } from "@/api/index";
import { ElMessage } from "element-plus";

const data = reactive({
  dialogVisible: false,
  handleType: null,
  title: null,
  list: [],
  multipleSelection: [],
});

const { dialogVisible, handleType, title, list, multipleSelection } = toRefs(data);

const statusMap = new Map([
  ["edit", "编辑图片标签"],
  ["batch", "批量操作图片标签"],
]);

const open = async (type, checked_list) => {
  title.value = statusMap.get(type);
  handleType.value = type;
  dialogVisible.value = true;
  console.log(checked_list);
  getTaskTagList(checked_list);
};

const getTaskTagList = async (checked_list) => {
  try {
    const res = await getImageTag({
      userId: window.userInfo.user.user_id,
      tagType: 1,
    });
    list.value = res.data.map((i) => {
      return {
        score: i.score,
        images_tag_id: i.id,
        tag_name: i.tag_name,
        tag_count: 1,
      };
    });
    checkedFun(checked_list);
  } catch (e) {
    throw Error(e);
  }
};

const multipleTableRef = ref();
const checkedFun = (checked_list) => {
  if (!checked_list?.length) return;
  checked_list.forEach((i) => {
    list.value.forEach((j) => {
      if (i.images_tag_id == j.images_tag_id) {
        j.tag_count = i.tag_count;
        nextTick(() => {
          multipleTableRef.value.toggleRowSelection(j, undefined);
        });
      }
    });
  });
};

defineExpose({ open });

const handleClose = () => {
  dialogVisible.value = false;
};

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

const handleConfirm = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error("至少选择一个标签");
    return;
  }
  const list = multipleSelection.value.map((i) => {
    i.tag_count = i.tag_count || 1;
    return i;
  });
  emit("checked", list);
  handleClose();
};

const emit = defineEmits(["checked"]);
</script>
